<template>
  <el-input
    v-model.trim="value"
    :placeholder="$t(placeholder)"
    @keyup.enter.native="search"
    @change="change"
    :style="inputStyle"
  >
    <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
    <i slot="suffix" class="el-icon-circle-close" :style="iStyle" @click="close" v-if="value !=''"></i>
  </el-input>
</template>
<script>

import UTILS from "common/src/utils/utils";
/**
 * 模糊查询输入框
 */
export default {
  name: "KeywordInput",
  props: {
    value: {
      required: true
    },
    placeholder:{
      default : 'courseArrange.professionTimeTable.plsInputNameOrCode'
    },
    //输入框样式
    inputStyle:{
      default : 'width:300px'
    },
    //输入框清除按钮位置
    iStyle:{
      default:'position: absolute;top:10px;margin-left:-37px'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    search(){
      this.$emit("enter", this.value);
    },
    change(){
      this.$emit('input', this.value);
    },
    close() {
      this.value = ''
      this.$emit('input', this.value);
      this.search();
    }
  }
};

</script>
